<template>
  <div class="full c">
    <!-- Header -->
    <div class="w_full h_60 lh_50">
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- body -->
    <div class="w_full h_full-60 flex_row_around pb_15">
      <!-- 1 -->
      <div class="w_32_p h_full box_bgi">
        <div class="w_full h_30_p relative flex_column_between">
          <img class="w_35_p absolute top_0 left_center border_radius_10 cursor object_fit_cover"
            src="../assets/images/img/def-user.png" alt="">
        </div>

        <div class="w_full h_70_p flex_column_start gap_10 ph_15">
          <div class="flex_row_start">
            <div class="w_100 color_fff">姓名：</div>
            <div class="main_color">巴根那</div>
          </div>
          <div class="flex_row_start">
            <div class="w_100 color_fff">手机号：</div>
            <div class="main_color"> 178****1234</div>
          </div>
          <div class="flex_row_start">
            <div class="w_100 color_fff">负责地区：</div>
            <div class="main_color">嘎鲁图镇</div>
          </div>
          <div class="full scroll_box text_indent_2 lh_25 text_justify color_fff">
            防疫员职责
            1. 动物卫生和畜牧方面法律法规、政策、方针等宣传工作。
            2. 动物免疫具体实施工作。
            按业务部门规定实施计划免疫或强制免疫注射，佩带耳标，填写、发放免疫卡，填写、报送免疫档案等。
            3. 动物产地检疫具体实施工作。
            按业务部门规定实施临栏产地检疫具体操作，验看免疫情况，以委托单位及检疫员的名义出具产地检疫证明等。
            4. 动物疫情报告工作。
            发现动物疫情，按业务部门规定及时上报，并应采取相应的防控措施，调查相关情况，实施全面普查等。
            5.消毒具体实施工作。
            按业务部门规定对运输车辆实施消毒，以委托单位等名义出具相关消毒凭证；对相关畜禽经营场所、饲养场所、因病死亡畜禽及其污染场所等实施消毒，按要求填写、报送消毒记录等。
            6. 死亡畜禽收集和统计工作。
            按业务管理部门要求定期实施畜禽死亡情况调查、死亡原因分类统计、死亡畜禽流向调查、相关资料报送，发现的死亡畜禽及时报告、收集、按规定要求无害化处理等。
            7. 畜禽饲养统计工作。
            按业务管理部门要求定期实施本行政村（涉农社区）畜禽饲养情况调查、按场（户）分类统计、报送，动物卫生和畜牧行业其他有关信息情况调查、统计、报送等。
            8. 畜牧兽医技术推广具体实施工作。
            按业务管理部门要求，依法开展饲养管理、良种推广、疾病防治咨询、一般性动物疾病诊疗等有关畜牧兽医技术推广、服务工作。
            9. 日常巡查工作。
            按业务管理部门及乡镇动物防疫监督所的要求定期对本行政村（涉农社区）等进行日常性全面巡查，发现违法行为、问题等应及时上报乡镇动物防疫监督所等业务管理部门，并协助动物卫生监督管理部门、行政执法机构及有关执法人员实施监督执法工作。
            10. 动物卫生监督管理部门委托的其他工作职责。
            【16664762329】
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p box_bgi p_10">
          <DataChart title="免疫统计" path='' chartType="柱状图3" :chartData="chartData2" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
        <div class="w_full h_49_p box_bgi p_10 relative">
          <div class="w_full flex_row_around absolute top_50 left_0 z_999">
            <div class="cursor" :class="activeAniamlName == '牛' ? 'main_color' : 'color_fff'" @click="clickAnimal('牛')">
              牛
            </div>
            <div class="cursor" :class="activeAniamlName == '山羊' ? 'main_color' : 'color_fff'"
              @click="clickAnimal('山羊')">
              山羊</div>
            <div class="cursor" :class="activeAniamlName == '绵羊' ? 'main_color' : 'color_fff'"
              @click="clickAnimal('绵羊')">
              绵羊</div>
            <div class="cursor" :class="activeAniamlName == '猪' ? 'main_color' : 'color_fff'" @click="clickAnimal('猪')">
              猪
            </div>
          </div>
          <DataChart title="疫苗库存" path='' chartType="环状图" :chartData="chartData1" filterText="" :filterList="[]"
            :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
      </div>

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between gap_10">
        <div class="full box_bgi p_10">
          <div class="chart_title">免疫户信息</div>
          <div class="w_full h_full-25 scroll_box mt_10">
            <div class="w_full flex_row_between cursor bgc_3E4453 border_radius_10 mb_10" v-for="(item, index1) in 10"
              :key="index1" @click="clickCattle(item)">
              <div class="w_25_p h_150 p_5">
                <img class="h_full border_radius_10 object_fit_cover" src="../assets/images/img/def-user.png" alt="">
              </div>

              <div class="w_75_p h_150 flex_column_around pl_20 color_fff">
                <div class="fs_20">姓名 : 巴特尔 </div>
                <div class="fs_20">电话 : 178****2342 </div>
                <div class="fs_20">年龄 : 46 </div>
                <div class="fs_20">负责区域 : 嘎鲁图镇 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const headerName = ref('防疫员信息')
const headerStyle = reactive({
  color: '#00A295',
  fontWeight: 500,
  fontSize: '20px'
})

const activeAniamlName = ref('牛')

const muHuList = reactive([
  {
    nickName: '巴特尔',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '巴音',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '布和',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '那仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '牧仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '朝拉',
    phone: '121343333333',
    gender: '1',
    address: ''
  }
])

let chartData1 = reactive({ unit: '', data: [] })
let chartData2 = reactive({ x: [], data1: { name: '存栏', data: [] }, data2: { name: '免疫', data: [] } })
let chartData3 = reactive({ unit: '', x: [], y: [] })

onMounted(() => {
  initChart()
})

function initChart() {
  chartData1.unit = '毫升 / 头份'
  chartData1.data = [
    { name: '小反刍', value: 165298 },
    { name: '口蹄疫', value: 1098256 },
    { name: '布病A9', value: 10973 }
  ]

  chartData2.x = ['牛', '山羊', '绵羊', '猪'].reverse()
  chartData2.y = [2356, 1733, 1267, 321].reverse()

  chartData3.unit = '辆'
  chartData3.x = ['大型拖拉机', '小型拖拉机', '粉碎机', '播种机', '除草机'].reverse()
  chartData3.y = [1, 2, 2, 1, 3, 1].reverse()
}

function clickCattle(item) {
  router.push(`/muHuPage`)
}

// 点击 牲畜 名称
function clickAnimal(animalName) {
  activeAniamlName.value = animalName
  if (animalName == '牛') {
    chartData1.data = [
      { name: '口蹄疫', value: 1098256 },
      { name: '布病A9', value: 10973 }
    ]
  } else if (animalName == '山羊') {
    chartData1.data = [
      { name: '小反刍', value: 8256 },
      { name: '布病A9', value: 6973 }
    ]
  } else if (animalName == '绵羊') {
    chartData1.data = [
      { name: '小反刍', value: 7324 },
      { name: '布病A9', value: 9973 }
    ]
  } else if (animalName == '猪') {
    chartData1.data = [
      { name: '猪蓝耳', value: 256 },
    ]
  }
}

</script>

<style>
.c {
  background-color: #0F1427;
}
</style>